<template>
	<div class="ks_body">
		<div class="banner">
			<image :src="dateInfo.banner" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="my_items">
				<div class="item" v-for="(item,index) in showList" :key="index" @click="showPop(item)">
					<p><span v-if="item.answer"><u-tag text="已回答" type="success" size="mini"> </u-tag></span>{{item.intro}}</p>
					<div class="tags">
						<div class="tag">
							<u-tag :text="item.type" plain size="mini" type="warning"></u-tag>
						</div>
						<div class="tag">
							<u-tag :text="item.bumen" plain size="mini" type="success"></u-tag>
						</div>
						<div class="tag">
							<u-tag :text="item.time" plain size="mini" type="error"></u-tag>
						</div>
					</div>
				</div>
			</div>
			<ul class="pagination" >
				<li @click="selectPage(0)">首页</li>
				<li @click="prevPage">上一页</li>
				<li>
					<span>第{{ page + 1 }}页/共{{ maxPage }}页</span>
				</li>
				<li @click="nextPage">下一页</li>
				<li @click="selectPage(maxPage - 1)">尾页</li>
			</ul>
		</div>
		<u-divider text="分割线" :hairline="true" :dot="true"></u-divider>
		<div class="bottom">
			<image :src="dateInfo.intro" mode="widthFix"></image>
		</div>
		
		<u-popup :show="pop" @close="pop=false"  mode="center">
			<div class="popInfo">
				<u-divider text="我的提问" textPosition="left"></u-divider>
				<div class="title">{{popinfo.title}}</div>
				<div class="intro">{{popinfo.intro}}</div>
				<div class="imgBox" v-if="popinfo.img">
					<image :src="'https://www.baixuemianshi.com/zhuanti/kesu/upload/' + popinfo.img" mode="widthFix" @click="showImg('https://www.baixuemianshi.com/zhuanti/kesu/upload/' + popinfo.img)"></image>
				</div>
				
				<u-divider text="回答" textPosition="left"></u-divider>
				<div v-if="popinfo.answer">
					<div class="answerBox">
						{{popinfo.answer}}
					</div>
					<u-divider text="回答" :dot="true"></u-divider>
					<div class="replyBox">
						<u--textarea v-model="popinfo.reply" placeholder="评价一下" ></u--textarea>
					</div>
					<div class="degreeBox">
						<div class="label">是否解决</div>
						<div class="solveBox">
							<div class="item" @click="popinfo.degree = '已解决'" :class="popinfo.degree == '已解决' ? 'selected1' : ''">
								<span><u-icon name="checkmark-circle" size="18" :color="popinfo.degree == '已解决' ? '#fff' : ''"></u-icon></span>已解决
							</div>
							<div class="item" @click="popinfo.degree = '未解决'" :class="popinfo.degree == '未解决' ? 'selected' : ''">
								<span><u-icon name="close-circle" size="18" :color="popinfo.degree == '未解决' ? '#fff' : ''"></u-icon></span>未解决
							</div>
						</div>
					</div>
					<u-button type="error" text="提交" @click="updateReply()"></u-button>
					
				</div>
				<div class="empty" v-else>
					暂未回答
				</div>
			</div>
		</u-popup>
		
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		name: 'headcomd',
		data() {
			return {
				banner: "https://www.baixuemianshi.com/zhuanti/images/banner_ks.jpg?" + new Date(),
				openid: "",
				count: 0,
				maxPage: 0,
				page: 0,
				showList: [],
				popinfo:{},
				pop: false,
				dateInfo:""
			};
		},

		onLoad(options) {

		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
		},
		mounted() {
			let that = this
		},

		created() {
			this.getBms()
			this.getopenid()
		},
		methods: {
			...mapActions(['LogSetPhone']),
			getBms() {
				let that = this
				uni.request({
					url: 'https://www.baixuemianshi.com/zhuanti/kesu/js/index.js',
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.dateInfo = resjson
					}
				});
			},
			getopenid() {
				let that = this;
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid = res.result.openid
						that.getCount()
					}
				});
			},
			async getCount(){
				let that = this
				let c = await db.collection('kesu').where({_openid: that.openid}).count()
				this.count = c.total
				this.maxPage = Math.ceil(c.total / 5)
				this.getDate()
			},
			getDate(){
				let that = this
				db.collection('kesu').where({_openid: that.openid}).skip(that.page * 5).limit(5).get({
					success: res => {
						that.showList = res.data
					},
					fail: req => {
						console.log(req)
					}
				})
			},
			prevPage() {
				if (this.page == 0) return;
				this.page--;
				this.getDate()
			},
			// 下一页
			nextPage() {
				if ((this.page + 1) == this.maxPage) return;
				this.page++;
				this.getDate()
			},
			selectPage(index) {
				this.page = index
				this.getDate()
			},
			showPop(item){
				let that = this
				db.collection('kesu').doc(item._id).get({
					success: res => {
						that.popinfo = res.data
						that.pop = true
					},
					fail: req => {
						console.log(req)
					}
				})
			},
			showImg(img){
				wx.previewImage({
					urls: [img], //需要预览的图片http链接列表，注意是数组
					showmenu:true,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			updateReply(){
				let that = this
				db.collection('kesu').doc(that.popinfo._id).update({
					data: {
						reply: that.popinfo.reply,
						degree: that.popinfo.degree
					},
					success: res => {
						uni.showToast({
							title:"提交成功",
							icon:"success"
						})
						that.pop = false
					}
				})
			}
		},
		components: {}
	};
</script>

<style>
	@import url("./index.css");
</style>